2 * MediaWiki Widgets – PHP DateInputWidget styles.
4 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
8 // Variables taken from OOUI's WikimediaUI theme
9 @ooui-font-size-browser: 16; // assumed browser default of `16px`
10 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
12 @background-color-base: #fff;
14 @color-base--emphasized: #000;
16 @border-base: 1px solid #a2a9b1;
17 @border-color-base--focus: #36c;
18 @border-color-input--hover: #72777d;
19 @border-radius-base: 2px;
21 @padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
22 @padding-horizontal-input-text: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`7px`
23 @padding-top-base: 8 / @ooui-font-size-browser / @ooui-font-size-base;
24 @padding-bottom-base: 7 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.5em`≈`7px`
26 @box-shadow-widget: inset 0 0 0 1px transparent;
27 @box-shadow-widget--focus: inset 0 0 0 1px #36c;
29 @line-height-widget-singleline: 15 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.07142857em`≈`15px`; Firefox needs a value, Chrome the unit;
31 @transition-ease-medium: @transition-duration-medium; // `ease` is the initial value
32 @transition-duration-medium: 250ms;
34 // Mixins taken from OOUI
35 .oo-ui-box-sizing( @type: border-box ) {
36 -webkit-box-sizing: @type;
37 -moz-box-sizing: @type;
41 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
42 margin-right: @spacing;
45 margin-right: @cancelled-spacing;
49 .oo-ui-transition( @value1, @value2: X, ... ) {
50 @value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after, string-quotes, value-keyword-case
51 -webkit-transition: @value;
52 -moz-transition: @value;
56 // DateInputWidget rules
57 .mw-widget-dateInputWidget {
58 &.oo-ui-textInputWidget {
59 display: inline-block;
61 // .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget`
63 .oo-ui-labelElement-label {
64 line-height: @line-height-widget-singleline;
68 // Note that this block applies to both the PHP widget and the JS widget
70 &.oo-ui-textInputWidget input {
71 display: inline-block;
75 * Ensures non-infused and infused widget have the same height.
76 * Equal to line height + top padding + bottom padding
81 // Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
83 background-color: @background-color-base;
84 color: @color-base--emphasized;
85 .oo-ui-box-sizing( border-box );
88 border-radius: @border-radius-base;
89 padding: @padding-input-text;
90 line-height: @line-height-widget-singleline;
93 &.oo-ui-widget-enabled {
94 .mw-widget-dateInputWidget-handle {
95 box-shadow: @box-shadow-widget; // necessary for smooth transition
97 border-color @transition-ease-medium,
98 box-shadow @transition-ease-medium
102 border-color: @border-color-input--hover;
107 border-color: @border-color-base--focus;
108 box-shadow: @box-shadow-widget--focus;
111 & > .oo-ui-labelElement-label {
118 &.oo-ui-textInputWidget input {